<template>
    <el-select ref="select" placeholder="请输入关键词搜索" :multiple="isMultiple"
      v-model="selectedValue" filterable remote clearable
      :remote-method="remoteMethod" :loading="loading"
      @change="onChange" :disabled="disabled">
      <el-option :disabled="option.isBind" v-for="option in options" :label="option.label" :key="option.value" :value="option.value">{{option.label}}</el-option>
    </el-select>
</template>
<script>
import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'
export default {
  props: {
    // disabled: Boolean,
    url: String,
    queryParamers: {
      type: Object,
      default: () => {}
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      selectedValue: '',
      loading: false,
      options: [],
      disabled: false,
      selectedOptions:[],
    }
  },
  methods: {
    changeName (val) {
      this.setQuery(val)
    },
    clear () {
      this.selectedValue=''
    },
    setQuery (val) {
      this.$refs['select'].setQuery(val)
    },
    remoteMethod (query) {
      if (query === '') {
        this.options = []
        return
      }
      this.loading = true
      const data = {
        searchName: query
      }
      for (let key in this.queryParamers) {
        data[key] = this.queryParamers[key]
      }
      axios.request(
        {
          url: process.env.VUE_APP_BASE_API + this.url,
          data,
          method: 'post',
          headers: {
            'marketId': store.state.app.marketId,
            'Authorization': getToken()
          }
        }
      ).then(res => {
        let data = res.data.data
        let items = []
        for (let item of data) {
          let isBind = false
          if('isBind' in item){
            isBind = item.isBind
          }
          items.push({
            value: item.id + '',
            label: item.name,
            stallName: item.stallName,
            businessOpenId: item.businessOpenId,
            exData: item,
            isBind: isBind
          })
        }
        this.options = items
        this.loading = false
      }).catch(_ => {
        this.loading = false
        this.options = []
      })
    },
    onChange (it) {
      if(this.isMultiple === true){
      let newselectedValue = it.map(item => ({ value: item }))

      let selectedOption = null
      let finded = false
      for(let ai of newselectedValue){
        if (finded){
          break
        }
        for(let bi of this.options){
          if(ai.value === bi.value){
            selectedOption = bi
            finded = false
            break
          }
        }
      }
      if (selectedOption != null) {
        let contan = false
        for(let i of this.selectedOptions){
          if (i.value == selectedOption.value){
            contan = true
          }
        }

        if (!contan){
          this.selectedOptions.unshift(selectedOption)
        }
      }

      // 移除
      let notDeleted = []
      for(let si of this.selectedOptions) {
        for(let v of it) {
          if(v == si.value){
            notDeleted.unshift(si)
          }
        }
      }

      this.selectedOptions = notDeleted

      console.log("selectedOptions", this.selectedOptions)

      // this.$emit('selected', this.selectedOptions)
      this.$emit('selected', it)
      console.log('over')
      }else{
        for (let i = 0; i < this.options.length; i++) {
          if (this.options[i].value === this.selectedValue) {
            this.$emit('selected', this.options[i])
            break
          }
        }
      }
    }
  }
}
</script>
